<template>
  <view class="comment-box">
    <view class="comment-header">
      <view class="comment-header-logo">
        <image :src="comments.commenterIcon" mode="aspectFill" />
      </view>
      <view class="comment-header-info">
        <view class="title">{{comments.commenterName}}</view>
        <view class="time">{{comments.createTime}}</view>
      </view>
      <!-- <view class="comment-info">
        <view class="comment-button" @click="commentReply(data)">回复</view>
      </view> -->
    </view>
    <view class="comment-content">
      <view class="comment-text">{{comments.content}}</view>
      <view class="comment-info">
        <view class="comment-button" @click="commentReply(comments)">回复</view>
      </view>
      <!-- 子回复 -->
      <view class="comment-reply" v-if="comments.children.length !== 0">
        <view class="reply-item" v-for="item in comments.children" :key="item.id">
            <view class="reply-content">
              <text class="name1">{{item.commenterName}}</text>：
              <text class="name2">@{{item.commentedUserName}}</text>
              <text class="content">{{'  '+item.content}}</text>
            </view>
            <view class="reply-bottom">
              <view class="reply-button" @click="reply(item)">回复</view>
              <view class="reply-time">{{item.createTime}}</view>
            </view>
        </view>
      </view>
      <!-- <view class="comment-reply" v-for="reply in comments.children" :key="reply.id">
        <comment-box :comments="reply" @reply="reply"></comment-box>
      </view> -->
    </view>
    <uni-popup ref="popup2"
               type="bottom"
               v-if="popupVisible">
      <view class="popup-wrap">
        <view class="popup-header">
          <text class="popup-header-item"
                @click="handleCancel">取消</text>
          <text class="popup-header-item"
                @click="handleSubmit">发布</text>
        </view>
        <view class="popup-content">
          <textarea class="popup-textarea"
                    maxlength="200"
                    v-model="commentValue"
                    fixed
                    placeholder="请输入评论内容"></textarea>
          <view class="popup-count">{{commentValue.length}}/200</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {uniIcons, uniPopup, uniSteps} from '@dcloudio/uni-ui'
import CommentBox from '@/components/CommentBox'
import { getDetail, getComments, addComment } from "@/api/remark.js"
import {mapState} from 'vuex';
export default {
  name: 'comment-box',
  components: {
    uniIcons, uniPopup, uniSteps, CommentBox
  },
  props: [
		'comments'
  ],
	computed: {
    ...mapState(['userInfo'])
  },
  mounted() {
  },
  data() {
    return {
      noData: false,
      visable: false,
      options:
      [
        {
          title:'小张同学：你好小明',
          desc:'2018-11-11 21:21:21'
        },
        {
          title:'小明同学：你好小张',
          desc:'2018-11-12 21:21:21'
        },
        {
          title:'小张同学：你的照片拍的好好看',
          desc:'2018-11-13 21:12:32'
        },
        {
          title:'小明同学：谢谢夸奖',
          desc:'2018-11-14 21:12:32'
        }
      ],
      replyItem:{},
      commentValue: '',
      popupVisible: false
    }
  },
  methods: {
    showReply() {
		this.$emit('showReply')
    },
    commentReply(comment) {
      this.$emit('reply', comment)
    },
    reply(comment) {
      this.replyItem = comment
      console.log('commentBox里的reply',this.replyItem)
      this.openPopup()
    },
    openPopup() {
      this.popupVisible = true
      this.$refs.popup2.open();
    },
    handleCancel() {
      this.$refs.popup2.close();
    },
    handleSubmit() {
      let parentId = 0
			console.log('commentBox里的submit',this.replyItem)
			if(this.replyItem.id) {
				parentId = this.replyItem.id
      }
      const data = {
        commentId: this.replyItem.commentId,
        // 被评论人 在这一条里是评论人
        commentUserId: this.replyItem.commenterId,
        parentId: parentId,
        content: this.commentValue,
        commenterId: this.userInfo.id,
      }
      console.log(data)
      addComment(data).then((res) => {
        if (res.code === 200) {
          uni.showToast({
            title: res.message,
          });
          this.getComments(this.replyItem.commentId)
          this.$emit('freshForce')
        }
        this.commentValue = ""
        this.$refs.popup2.close()
      })
    },
    getComments(val) {
      const data = { commentId: val };
      getComments(data).then((res) => {
        if (res.code !== 200) {
          uni.showToast({
            title: res.message,
            icon: "none",
          });
          return;
        }
        if (res.data !== null) {
          this.comments = res.data;
        }
      })
    },
  }
}
</script>

<style lang='scss'>
  .comment-box {
    margin: 15px 0;
    // padding: 0 15px;
    // padding-bottom: 10px;
    // border-bottom: 1px dotted #999;
    .comment-header {
      display: flex;
      justify-content: space-around;
      .comment-header-logo {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        overflow: hidden;
        image {
          height: 100%;
          width: 100%;
        }
      }
      .comment-header-info {
        display: flex;
        flex-direction: column;
        padding-left: 15px;
        font-size: 12px;
        color: #999;
        line-height: 1;
        .title {
          margin-bottom: 10px;
          font-size: 14px;
          color: #333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 130px;
        }
      }
      .comment-info {
        margin-top: 15px;
        display: flex;
        .comment-button {
          padding: 2px 10px;
          font-size: 12px;
          color: #999;
          border-radius: 20px;
          border: 1px $theme-color solid;
        }
      }
      // .comment-header-more {
      //   // margin-left: 80px;
      //   // border: 1px solid #999;
      //   color: $theme-color;
      //   border-radius: 10px;
      //   font-size: 10px;
      //   height: 20px;
      //   width: 60px;
      //   text-align: center;
      //   line-height: 20px;
      // }
    }
    .comment-content {
      margin-top: 10px;
      font-size: 14px;
      color: #000;
      .comment-text {
        margin-top: 10px;
      }
      .comment-info {
        margin-top: 15px;
        display: flex;
        .comment-button {
          padding: 2px 10px;
          font-size: 12px;
          color: #999;
          border-radius: 20px;
          border: 1px $theme-color solid;
        }
      }
      .comment-reply {
        background-color: #f5f5f5;
        margin: 15px 0;
        padding: 0 10px;
        padding-top: 5vw;
        border: 1px solid #eeeeee;
        .reply-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 5vw;
          border-bottom: 1px dotted #f5f5f5;
          .reply-content {
            .name1 {
              color: $theme-color
            }
            .name2 {
              color: #ff9c61
            }
            .content {
              color: #000;
            }
          }
          .reply-bottom {
            margin: 3vw 0;
            display: flex;
            color: #666;
            font-size: 12px;
            height: 2vw;
            line-height: 2vw;
            .reply-button {
              margin-right: 20rpx;
            }
          }
        }
      }
    }
  }
</style>
